{extends file="backend/index.tpl"} 

{block name="page-content"}
{literal}
<script type="text/javascript">
$(document).ready(function() {

	$('input[name="name"]').blur(function() {
		var name = $('input[name="name"]').val();
		$.ajax({
			type: "GET",
			url: "/truyen/admin/ajax/checkBookUname",
			cache: false,
			data: { name: name },
			success: function(res){
				$('#uName').val(res);	
			}
		});
	});

	$('input[name="uname"]').blur(function() {
		var uname = $('input[name="uname"]').val();
		var categoryID = $('select[name="category_id"]').val();
		$.ajax({
			type: "GET",
			url: "/truyen/admin/ajax/checkBookUniqueNameByCategoryID",
			cache: false,
			data: { uname: uname, categoryID: categoryID },
			success: function(res){
				console.log(res);
				if (res === '1'){
					$('#uName').css({"border-color": "red"});
				} else {
					$('#uName').css({"border-color": "#CCC"});
				}		
			}
		});
	});

});

</script>
{/literal}
<form id="validate" class="addGame" method="POST" action="{$base_url}admin/add-book.html" enctype="multipart/form-data">
	<div class="row-fluid">
		<div class="span6">
			<div class="block">
				<div class="head">
					<h2>Add Book</h2>
					<ul class="buttons">
						<li><a href="#" onclick="source('form_default'); return false;">
								<div class="icon">
									<span class="ico-info"></span>
								</div> </a>
						</li>
					</ul>
				</div>
				
				<div class="data-fluid">
					<div class="row-form">
						<div class="span3">Category</div>
						<div class="span9">
							<select name="category_id" class="select" style="width: 100%;">
								<option value="0">Nhớ Chọn Nha!!!</option>
								{foreach from=$listCategory item=category}
								<option value="{$category.id}">{$category.name}</option>
								{/foreach}
							</select>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Name</div>
						<div class="span9">
							<input type="text" class="validate[required]" name="name" /> <span
								class="bottom">Required</span>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Unique Name</div>
						<div class="span9">
							<input type="text" class="validate[required]" id="uName" name="uname" /> 
							<span class="bottom" style="color:red">Nhớ Chọn Category Trước Nha!!!</span>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Type</div>
						<div class="span9">
							<input type="radio" class="validate[required]" checked="checked"
								name="type" value="T" /> Translate <input type="radio"
								class="validate[required]" name="type" value="C" /> Convert
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Use Volume</div>
						<div class="span9">
							<input type="radio" class="validate[required]" checked="checked"
								name="use_volume" value="Y" /> Yes <input type="radio"
								class="validate[required]" name="use_volume" value="N" /> No
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Status</div>
						<div class="span9">
							<select name="status" class="select" style="width: 100%;">
								<option value="1">Full</option>
								<option value="0">Không Hiển Thị</option>
								<option value="2">Còn Tiếp</option>
								<option value="3">Tạm Dừng</option>
							</select>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Description</div>
						<div class="span9">
							<textarea name="description" placeholder="Placeholder example"
								class="validate[required]" style="height: 300px !important"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="span6">
			<div class="block">
				<div class="head">
					<h2></h2>
					<ul class="buttons">
						<li><a href="#" onclick="source('form_pa'); return false;">
								<div class="icon">
									<span class="ico-info"></span>
								</div> </a>
						</li>
					</ul>
				</div>
				<div class="data-fluid">
					
					<div class="row-form">
						<div class="span3">Image</div>
						<div class="span9">
							<div class="input-append file" style="width: 300px;">
                                <input type="file" name="filename" style="width: 298px;"/>
                                <input type="text"/>
                                <span class="btn">Browse</span>
                            </div> 
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Author</div>
						<div class="span9">
							<select name="author_id" class="select" style="width: 100%;">
								<option value="0">Nhớ Chọn Nha!!!</option>
								{foreach from=$listAuthor item=author}
								<option value="{$author.id}">{$author.name}</option> 
								{/foreach}
							</select>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Page Title</div>
						<div class="span9">
							<input type="text" id="pageTitle" name="page_title" />
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Page Keyword</div>
						<div class="span9">
							<input name="page_keyword" type="text" class="tags" />
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Page Description</div>
						<div class="span9">
							<textarea name="page_description"
								placeholder="Placeholder example" class="validate[required]"></textarea>
						</div>
					</div>
					<div class="row-form">
						<div class="span3">Mobile Description</div>
						<div class="span9">
							<textarea name="mob_description"
								placeholder="Có Thể để rỗng nha!!!"
								style="height: 300px !important"></textarea>
						</div>
					</div>
					<div class="toolbar bottom tar">
						<div class="btn-group">
							<button class="btn btn-info" type="button"
								onClick="$('#validate').validationEngine('hide');">Ẩn Thông Báo</button>
							<button class="btn" type="submit" name="submit" id="addBook">Thêm Truyện Mới
								</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
{/block}

